<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create Design</title>
<link rel="stylesheet" href="css/style.css" media="screen" /> 
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
        
<script type="text/javascript">
$(document).ready(function(){
	$("#refinements_button").click(function(){
		toogleMenu();
	});
	
	$(document).keypress(function(e){
		if(e.which == 114){
			toogleMenu();
		}
	});
	
	function toogleMenu(){
		var $menu = $("#menu");
		if($menu.css("display")=="none"){
			showMenu();
		}else{
			hideMenu();
		}
	}
	
	function showMenu(){
		$("#menu").show("slow");
		$("#item-container").removeClass("no-menu");
		$("#items").removeClass("lst-photo").addClass("lst-photo-3cols");
	}
	
	function hideMenu(){
		$("#menu").hide("slow");
		$("#item-container").addClass("no-menu");
		$("#items").removeClass("lst-photo-3cols").addClass("lst-photo");
	}
});
</script>
</head>

<body>
<div class="wrapper">
	<header>
    	<div class="topheader">
        	<section><h3><a href="javascript:;">Made by people</a></h3></section>
            <aside>
                <p class="navtop">
                	<a href="javascript:;">login</a>
                    <a href="javascript:;">cart(0)</a>
                    <a href="javascript:;" class="arrow1">more</a>
                </p>
            </aside>
        </div>
        <nav class="navmain">
        	<!--<h3><a href="javascript:;" class="active">Create</a><br /><a href="javascript:;">Shop</a></h3>-->
            <ul class="mainmenu">
            	<li><a href="javascript:;">BROWSE</a></li>
                <li><a href="javascript:;" class="active">DESIGN</a>
					<ul class="design-submenu">
                    	<li><a href="javascript:;">Submit a design</a></li>
                        <li><a href="javascript:;">how to submit</a></li>
                        <li><a href="javascript:;">design criteria</a></li>
                        <li><a href="javascript:;">download templates</a></li>
                        <li><a href="javascript:;">fabric gallery</a></li>
                    </ul>
				</li>
                <li><a href="javascript:;">BRAND IT</a>                	                	
                </li>
                <li><a href="javascript:;">FUND IT</a></li>
                <li><a href="javascript:;">MY STUFF</a></li>
                <li><a href="javascript:;">BLOG</a></li>
            </ul>
        </nav>
        
    </header>
    <div class="maincontent">
    	<section>     	
            <div class="header-submit">
                <div class="thumb-logo">designers logo<br /> or picture</div>
                <h1>Submit a design</h1>
            </div>
            <div id="tabContainer">
                <div class="tabs">
                    <ul>
                        <li id="tabHeader_1">DESCRIBE</li>
                        <li id="tabHeader_2">IMAGES</li>
                        <li id="tabHeader_3">VIDEO</li>
                        <li id="tabHeader_4">FABRICS</li>
                        <li id="tabHeader_5">STATUS</a></li>
                        <li id="tabHeader_6">SHARE/FUND IT</li>
                    </ul>
                </div>
                <div id="tabscontent">
                    <!--DESCRIBE YOUR DESIGN -->
                    <div id="tabpage_1" class="tabpage">
                        <ul class="tab-describe">
                            <li>DESCRIBE YOUR DESIGN</li>
                            <li>
                                <label>choose a category</label>
                                <div class="frm-info">
                                    <div id="mcs_container">
                                        <div class="customScrollBox">
                                            <div class="container">
                                                <ul class="content">
                                                    <li>women</li>
                                                    <li>men</li>
                                                    <li>children</li>
                                                    <li>unisex</li>
                                                    <li>unisex</li>
                                                    <li>women</li>
                                                    <li>men</li>
                                                    <li>children</li>
                                                    <li>unisex</li>
                                                    <li>unisex</li>
                                                </ul>
                                             </div>
                                             <div class="border_dragger">
                                                 <div class="dragger_container">
                                                    <div class="dragger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
                                    </div>
                                    <div id="mcs_container">
                                        <div class="customScrollBox">
                                            <div class="container">
                                                <ul class="content">
                                                    <li>MODERN</li>
                                                    <li>ATHLETICA</li>
                                                    <li>FASHION</li>
                                                    <li>BREAD N BUTTER</li>
                                                </ul>
                                             </div>
                                             <div class="border_dragger">
                                                 <div class="dragger_container">
                                                    <div class="dragger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
                                    </div>
                                    <div id="mcs_container" style="margin-right:0">
                                        <div class="customScrollBox">
                                            <div class="container">
                                                <ul class="content">
                                                    <li>PANT</li>
                                                    <li>SKIRT</li>
                                                    <li>FSHORTS</li>
                                                    <li>ETC.</li>
                                                </ul>
                                             </div>
                                             <div class="border_dragger">
                                                 <div class="dragger_container">
                                                    <div class="dragger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
                                    </div>
                                </div>
                            </li>
                            <li><label>Name your piece</label><input type="text" /></li>
                            <li><label>description & influences</label><textarea rows="3"></textarea></li>
                            <li class="frm-bottom">
                                <div>
                                	<select class="nav-private">
                                    	<option>PUBLIC SO EVERYONE CAN SEE</option>
                                        <option>Make Private</option>
                                        <option>For Friends only</option>
                                    </select><!--<a href="javascript:;" class="nav-private">PUBLIC SO EVERYONE CAN SEE</a>-->
                                </div>
                                <div class="note">By clicking below you have read and agree to the terms of service of Made by People</div>
                                <div class="group-btn">
                                    <input class="btn" type="button" value="save" />
                                    <input class="btn1" type="button" value="cancel" />
                                    <a  href="javascript:;">add images</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--UPLOAD A SKETCH OR DESIGN-->
                     <div id="tabpage_2" class="tabpage">
                        <ul class="tab-upload-sketch">
                            <li>UPLOAD A SKETCH <br />OR DESIGN</li>
                            <li>
                                <label>&nbsp;</label>
                                <div class="up-image">
                                    <h3 class="image active"><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                    <h3><span>upload subsequent fields show when previous one is filled</span><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                    <h3 class="image"><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                    <h3 class="image"><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                </div>
                            </li>
                            <li>
                                <label>
                                    TECHNICAL FLAT  <br />SKETCHES <font size="+1" color="red">?</font>
                                    <br /><span>Skip this if you do not have it or <font color="#3FA9F5">HIRE A PRO</font> to help you</span>
                                </label>
                                <div class="up-image">
                                    <h3 class="image active"><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                    <h3><span>upload subsequent fields show when previous one is filled</span><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                    <h3 class="image"><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                    <h3 class="image"><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                </div>
                            </li>
                            <li>
                                <label>DESCRIPTION OF FIT</label>
                                <div class="up-image"><textarea rows="1"></textarea></div>
                            </li>
                            <li>
                                <label>&nbsp;</label>
                                <div class="group-btn">
                                    <input class="btn" type="button" value="save" />
                                    <input class="btn1" type="button" value="cancel" />
                                    <a  href="javascript:;">upload video</a>
                                    <a  href="javascript:;">add another design</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--UPLOAD VIDEO-->
                    <div id="tabpage_3" class="tabpage">
                        <div class="up-video">
                        	<label>UPLOAD VIDEO</label>
                            <div>
                            	<input type="text" />
                                <h3><img src="images/arrow5.png" /> Upload video<input type="file" class="btn-upvideo" /></h3>
                                <div class="group-btn">
                                    <input class="btn" type="button" value="save" />
                                    <input class="btn1" type="button" value="cancel" />
                                    <a  href="javascript:;">add fabrics</a>
                                    <a  href="javascript:;">add another design</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!--FABRICS -->
                     <div id="tabpage_4" class="tabpage">
                        <ul class="up-fabrics">
                            <li>FABRICS</li>
                            <li>
                                <label>&nbsp;</label>
                                <div class="up-image">
                                    <h3 class="active"><span>GO TO FABRIC SELECTOR choice #2</span><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                    <h3><span>GO TO FABRIC SELECTOR choice #2</span><input class="btn-browser" type="file" name="datafile" size="1"></h3>
                                </div>
                            </li>
                            <li>
                                <label>DESCRIBE THE FABRIC, TEXTURE, HANG</label>
                                <div class="up-image"><textarea rows="1"></textarea></div>
                            </li>
                            <li class="txtcheck">
                            	<label>&nbsp;</label>
                                <div><input type="checkbox" checked="checked" />we are always updating our library of fabrics would you like to be informed of fabric updates?</div>
                            </li>
                            <li>
                                <label>&nbsp;</label>
                                <div class="group-btn">
                                    <input class="btn" type="button" value="save" />
                                    <input class="btn1" type="button" value="cancel" />
                                    <a  href="javascript:;">upattern status</a>
                                    <a  href="javascript:;">add another design</a>
                                </div>
                            </li>
                        </ul>
                     </div>
                     <!--PATTERN STATUS-->
                     <div id="tabpage_5" class="tabpage">
                        <div class="pattern-status">
                        	<label>PATTERN STATUS</label>
                        	<div>
                            	<p><input type="checkbox" checked="checked" />IS THIS AN ORIGINALDESIGN?</p>
                                <p><input type="checkbox" checked="checked" />IS THIS A REINTERPRETATION YOU WOULD LIKE TO REDESIGN?</p>
                                <p><input type="checkbox" checked="checked" />IS THIS A SAMPLE OF THE ACTUAL GARMENT YOU ARE SUBMITTING?</p>
                                <p><input type="checkbox" checked="checked" />DO YOU HAVE THE PATTERN FOR THIS?</p>
                                <p class="group-btn" style="margin-top:20px">
                                    <input class="btn" type="button" value="save" />
                                    <input class="btn1" type="button" value="cancel" />
                                    <a  href="javascript:;">upattern status</a>
                                    <a  href="javascript:;">add another design</a>
                                </p>
                            </div>
                        </div>
                     </div>
                     <!--FUND AND SHARE IT-->
                     <div id="tabpage_6" class="tabpage">
                        <div class="pattern-status">
                        	<label>FUND AND SHARE IT</label>
                            <div class="ico-social">
                                <a href="javscript:;" class="ico-digg"></a>
                                <a href="javscript:;" class="ico-twitter"></a>
                                <a href="javscript:;" class="ico-facebook"></a>
                                <a href="javscript:;" class="ico-linkin"></a>
                                <a href="javscript:;" class="ico-google"></a>
                                <p class="group-btn" style="margin-top:20px">
                                    <input class="btn1" type="button" value="FUND IT" />
                                    <span class="txt">Believe in your design?  Bypass the voting process and have your friends help you get your samples made.  If they reach a threshold in wholesale orders in our showroom or preorderson on our website the will be manufactured.  Otherwise, get enough votes and your samples will come to life.  </span>
                                </p>
                            </div>
                        </div>
                     </div>
                </div>                
             </div>
        </section>
        <aside>
        	<div class="left-ads">
            	<h1>HIRE A PRO</h1>
                <div class="ads-active">
                	<p>Want your presentations to make a splash?  A Made By People pro will sketch, detail, and assist you to give your preliminary design pizzaz!</p>
                </div>
                <h4>PROMOTIONS</h4>
                <div class="ads-inactive">
                	PROMOTIONS<br />
                    OR <br />
                    ADVERTISING
                </div>
                <div class="ads-inactive">
                	PROMOTIONS<br />
                    OR <br />
                    ADVERTISING
                </div>
                <div class="ads-inactive">
                	PROMOTIONS<br />
                    OR <br />
                    ADVERTISING
                </div>
            </div>
        </aside>
    </div>
    <footer>
    	<nav>
        	<div class="follow">
            	<h4>Follow us</h4>
                <span>for fashion freshness Twitter<br /><br />BECOME A FAN Facebook </span>
            </div>
            <div class="about">
            	<h4>About</h4>
                <span>Made By People is not a cottage industry for sewing circles.  <br />It is
a high tech solution for fashion democracy.</span>
            </div>
            <ul>
            	<li>FOR DESIGNERS:</li>
                <li><a href="javascript:;">Create a Look</a></li>
                <li><a href="javascript:;">Browse a Look</a></li>
                <li><a href="javascript:;">Broswe Sketches</a></li>
                <li><a href="javascript:;">Browse Samples</a></li>
                <li><a href="javascript:;">Discover Designers</a></li>
            </ul>
            <ul>
            	<li>FOR SHOPPERS:</li>
                <li><a href="javascript:;">Whats New</a></li>
                <li><a href="javascript:;">Vote</a></li>
                <li><a href="javascript:;">Prebuy</a></li>
                <li><a href="javascript:;">Goto to Shop</a></li>
            </ul>
            <ul>
            	<li>MADE BY PEOPLE:</li>
                <li><a href="javascript:;">About</a></li>
                <li><a href="javascript:;">Learn</a></li>
                <li><a href="javascript:;">Contact</a></li>
                <li><a href="javascript:;">Press Access</a></li>
                <li><a href="javascript:;">Wholesale </a></li>
                <li><a href="javascript:;">Team</a></li>
                <li><a href="javascript:;">Privacy Policy</a></li>
                <li><a href="javascript:;">Terms of Service</a></li>
                <li><a href="javascript:;">Careers</a></li>
                <li><a href="javascript:;">FAQ</a></li>
            </ul>
        </nav>
        <div class="copyright">
        	<h4>© 2012 Made By People all rights reservedr</h4>
        </div>
    </footer>
</div>

<noscript>
	<style type="text/css">
		#mcs_container .customScrollBox{overflow:auto;}
		#mcs_container .dragger_container{display:none;}
	</style>
</noscript>

<script>
$(window).load(function() {
	mCustomScrollbars();
});

function mCustomScrollbars(){
	$("#mcs_container").mCustomScrollbar("vertical",90,"easeOutCirc",1.05,"auto","yes","yes",15); 
}

/* function to fix the -10000 pixel limit of jquery.animate */
$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}

/* function to load new content dynamically */
function LoadNewContent(id,file){
	$("#"+id+" .customScrollBox .content").load(file,function(){
		mCustomScrollbars();
	});
}
</script>
<script src="js/jquery.mCustomScrollbar.js"></script>
</body>
</html>
